<template>
	<view class="index-box" :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.price }">
		<view class="nav" v-if="showNav && vuex_config.self_mention != 1 ">
			<view class="nav-box">
				<view :class="['nav-item',index == navCurrent?'active':'']" v-for="(item,index) in navList" :key='index' @click="changeNav(index)">{{item}}</view>
			</view>
		</view>
		<!-- 快递地址 -->
		<sww-wx-address v-show="vuex_config.self_mention != 1 && navCurrent == 0"></sww-wx-address>
		<!-- 自提地址 -->
		<pick-up-com ref="pick_up_view" v-show='navCurrent == 1' :prodId = 'prodId'  @changPick="changPick"></pick-up-com>
		<view class="box">
			<!--  规格信息 -->
			<prod-list :selectList="selectList" :checkPick="checkPick"></prod-list>
			<template v-if="checkPick && navCurrent == 1">
				<view class="cell_item">
					<view>收货人</view>
					<input placeholder="请输入收货人姓名" class="cell_center" type="text" v-model="pickAddress.name" />
					<view class="iconfont iconfont-e775"></view>
				</view>
				<view class="cell_item">
					<view>手机号</view>
					<input placeholder="请输入联系电话" class="cell_center" type="number" v-model="pickAddress.mobile" />
					<view class="iconfont iconfont-e775"></view>
				</view>
			</template>
			<!-- 优惠券、备注 -->
			<order-cell ref="order_cell" :hasCoupon="true" v-model="couponPrice" :checkPick="checkPick"
				:prodPostage="prodPostage" :productIds="productIds" :prodPrice="allProdPrice" :navCurrent='navCurrent' :fk_supplier_id="fk_supplier_id"></order-cell>
		</view>
		<!-- 支付方式 -->
		<view class="box">
			<sww-pay-type v-model="dataForm.pay_type" :price="totalPrice" :isBalance="isBalance"></sww-pay-type>
		</view>
		<sww-goods-action>
			<view class="sub-price">
				<text class="">合计：</text>
				<text class="all_price_sign">￥</text>
				<text class="all_price_num">{{ $price(totalPrice) }}</text>
			</view>
			<view class="sub-btn" @click="onSubmit">提交订单</view>
		</sww-goods-action>
	</view>
</template>
<script>
	import { payOrder } from '@/mixins/payOrder';
	import { confirm } from '../../components/orderConfirm/index.js';
	import prodList from '../../components/orderConfirm/prodList.vue';
	import orderCell from '../../components/orderConfirm/orderCell.vue';
	import { isMobile } from '@/utils/validate.js';
	import pickUpCom from '@/package/product/components/pickupComponent.vue';
	export default {
		mixins: [confirm, payOrder],
		components: {
			prodList,
			orderCell,
			'pick-up-com': pickUpCom
		},
		data() {
			return {
				isBalance:true,
				order_type: 1,
				prodId:null,
				checkPick: false, // 是否选择了自提地址
				pickAddress: {
					name: '',
					mobile: ''
				},
				showNav:false,
				navList:['快递地址','自提地址'],
				navCurrent:0
			};
		},
		onShow() {
			this.$nextTick(() => {
				if(this.vuex_config.self_mention == 1){
					this.navCurrent = 1
				}
				this.$refs.pick_up_view.$show();
			});
		},
		methods: {
			// 自提选择发生变化
			changPick(val) {
				this.checkPick = val;
			},
			
			specialHandle(options) {
				if(options && options.business_pro){
					// 共享产品
					this.isBalance = false
				}
				this.pickAddress = {
					name: this.vuex_user.real_name,
					mobile: this.vuex_user.mobile
				}
			},
			changeNav(idx){
				this.navCurrent = idx
			},
			// 提交表单
			onSubmit() {
				this.$u.debounce(
					() => {
						if (this.checkPick && this.navCurrent == 1) {
							if (!this.pickAddress.name) {
								this.$toast('请输入联系人名称');
								return;
							} else if (!isMobile(this.pickAddress.mobile)) {
								this.$toast('请正确输入联系方式');
								return;
							}
						} else {
							if (!this.vuex_address) {
								this.$toast('请选择收货地址');
								return;
							}
							// 当前地址是否在配送区域
							if (!this.$checkCanBuyFromPostageModule()) return;
						}
						let prodName = '';
						let json = this.selectList.map((item, index) => {
							prodName += (index > 0 ? ',' : '') + item.product_name;
							return {
								fk_pro_id: item.product_id,
								fk_stock_id: item.fk_attr_id,
								num: item.num,
								name: item.standard,
								price: item.price
							};
						});
						let couponItem = this.$refs.order_cell.couponItem;
						let params = {
							remark: this.$refs.order_cell.remark || '',
							type: this.dataForm.type, // 是否清理用户购物车 1-不清理 2-清理
							postage: this.checkPick&&this.navCurrent == 1 ? 0 : this.prodPostage, // 邮费
							total_amount: this.totalPrice, // 订单总金额
							coupon_id: couponItem.pk_id || '0',
							coupon: couponItem.price || '0',
							json_detailed: JSON.stringify(json)
						};
						if (this.checkPick &&this.navCurrent == 1) {
							let pickForm = this.$refs.pick_up_view.pickForm;
							params = {
								...params,
								...this.pickAddress,
								address: `[自提]${pickForm.name} ${pickForm.address}`
							};
						} else {
							params = {
								...params,
								...this.vuex_address
							};
						}
						if (params.coupon_id && params.coupon_id != '0') params.remark += `;使用优惠券${couponItem.price}`;
						this._submitOrder(params, {
								// prodName:prodName,
								totalPrice: params.total_amount,
								pay_type: this.dataForm.pay_type,
								order_type: this.order_type,
								delayed: this.prodType == 'seckill' ? true : false, // 是否延时下单
							})
							.then(() => {
								if (this.dataForm.type == 2) {
									/*表示从购物车进来，需要删除购物车商品*/
									// #ifndef MP-ALIPAY || MP-TOUTIAO	 || MP-BAIDU	
									let eventChannel = this.getOpenerEventChannel();
									eventChannel.emit('$onSubmit');
									// #endif 
								}
							})
							.catch(() => {});
					},
					1000,
					true
				);
			}
		}
	};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.index-box {
		width: 100%;
		.nav{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20rpx 0;
			.nav-box{
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				.nav-item{
					background-color: #fff;
					width: 200rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					&.active{
						background-color: var(--color);
						color: #fff;
					}
				}
			}
		}
		.cell_item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			height: 60rpx;
			box-sizing: content-box;

			.cell_center {
				flex: 1;
				overflow: hidden;
				text-align: right;
				color: #999;
			}

			.iconfont {
				color: #666;
				margin-left: 8rpx;
				position: relative;
			}
		}

		.box {
			width: 100%;
			padding: 0 24rpx;
			background-color: #ffffff;
			margin-bottom: 10rpx;
		}

		.sub-price {
			padding-left: 30rpx;
			font-size: 32rpx;

			.all_price_sign {
				color: var(--price);
				font-size: 30rpx;
			}

			.all_price_num {
				font-size: 40rpx;
				color: var(--price);
			}
		}

		.sub-btn {
			width: 250rpx;
			height: 100rpx;
			background: var(--color);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			font-size: 30rpx;
			margin-left: auto;
		}
	}
</style>
